<template>
	<div class="flex flex-col justify-around">
		<div class="flex items-end justify-between flex-nowrap">
			<div class="flex flex-nowrap">
				<div class="flex items-end">
					<div class="font-semibold align-bottom text-[20px] text-[#06c5f9] leading-[20px] pb-[4px]">AQI</div>
					<div class="align-bottom font-thin text-[40px] leading-[40px]">121</div>
				</div>
				<div class="min-w-[5em] bg-[#ff7e00] rounded-[1em] h-[20px] text-center text-[#000]">轻度污染</div>
			</div>
			<div class="flex justify-start flex-nowrap text-xs">
				<div class="text-[#06c5f9]">
					<div class="whitespace-nowrap">首要污染物：臭氧</div>
					<div class="whitespace-nowrap">发布时间：2023-08-22 10:00</div>
				</div>
			</div>
		</div>
		<div class="flex justify-around">
			<div v-for="item in list" :key="item.type" class="text-xs text-center whitespace-nowrap ml-1 flex-1">
				<div>{{ item.level }}</div>
				<div class="mt-[4px] font-thin">{{ item.range }}</div>
				<div :class="['border-t-[6px]', 'py-[6px]', 'italic', `${item.class}`]">{{ item.day || '--' }} 天</div>
				<div class="bg-[#06c5f9]">{{ item.type }}</div>
				<div class="bg-[#3358cc]">{{ item.val }}</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
const list = [
	{
		level: '优',
		range: '(0-50)',
		day: 0,
		type: 'PM2.5',
		val: '14',
		class: 'level1',
	},
	{
		level: '良',
		range: '(50-100)',
		day: 0,
		type: 'PM10',
		val: '19',
		class: 'level2',
	},
	{
		level: '轻度污染',
		range: '(100-150)',
		day: 0,
		type: 'SO₂',
		val: '91',
		class: 'level3',
	},
	{
		level: '中度污染',
		range: '(150-200)',
		day: 0,
		type: 'NO₂',
		val: '119',
		class: 'level4',
	},
	{
		level: '重度污染',
		range: '(200-250)',
		day: 0,
		type: 'CO',
		val: '0.53',
		class: 'level5',
	},
	{
		level: '严重污染',
		range: '(250-300)',
		day: 0,
		type: 'O₃',
		val: '245',
		class: 'level6',
	},
];
</script>

<style lang="scss" scoped>
.bg {
	background-color: #ff7e00;
}
.level1 {
	border-color: #09bb07;
}
.level2 {
	border-color: #f9d900;
}
.level3 {
	border-color: #ff7e00;
}
.level4 {
	border-color: #ff0000;
}
.level5 {
	border-color: #9b004c;
}
.level6 {
	border-color: #800021;
}
</style>
